<template>
  <div style="margin-top: 20px;padding-bottom: 50px;">
    <div>
      <van-radio-group v-model="radio"
                       @change="RadioChange">
        <van-radio v-for="(item, i) in item"
                   :key="i"
                   :name="item._id">{{item.name}}</van-radio>
      </van-radio-group>
    </div>
    <div class="AllItem">
      <div v-for="(item, i) in show"
           :key="i"
           @click="openEject(item)"
           class="item">
        <ImgShow :name="item.name"
                 :icon="$upload+item.icon"
                 :size="70" />
      </div>
    </div>
    <div v-if="isEject">
      <van-popup v-model="isEject"
                 round
                 position="bottom"
                 transition-appear>
        <div class="icon">
          <ImgShow :icon="$upload+ejectShow.icon"
                   :size="70" />
        </div>
        <div class="main">
          <div>【装备名称】：{{ejectShow.name}}</div>
          <div>【装备价格】：{{ejectShow.price}}</div>
          <div>{{ejectShow.descibe}}</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import ImgShow from '../utils/ImgShow.vue'
import { getItem } from '@/api/introduction'
export default {
  components: { ImgShow },
  data () {
    return {
      item: [],
      radio: 0,
      show: [],
      isEject: false,
      ejectShow: {}
    }
  },
  methods: {
    fetch () {
      getItem().then(res => {
        this.item = res.data
        this.radio = res.data[0]._id
      })
    },
    async RadioChange () {
      const tmp = this.item.find(item => item._id === this.radio)
      this.show = tmp.children
    },
    openEject (item) {
      this.ejectShow = item
      this.isEject = !this.isEject
    }
  },
  created () {
    this.fetch()
  }
}
</script>
<style lang="less" scoped>
.van-radio-group {
  display: flex;
  justify-content: space-around;
}
.AllItem {
  display: flex;
  flex-wrap: wrap;
  .item {
    margin-top: 10px;
    width: 25%;
    height: 85px;
  }
}
</style>
